<form [formGroup]="form">
    <mat-form-field class="full-width">
        <mat-label for="title">{{
            'HOME.XTREAM_PLAYLIST.TITLE' | translate
        }}</mat-label>
        <input matInput type="text" id="title" formControlName="title" />
    </mat-form-field>
    <mat-form-field class="full-width" subscriptSizing="dynamic">
        <mat-label for="serverUrl">{{
            'HOME.XTREAM_PLAYLIST.SERVER_URL' | translate
        }}</mat-label>
        <input
            matInput
            type="text"
            id="serverUrl"
            formControlName="serverUrl"
        />
        <mat-hint>{{
            'HOME.XTREAM_PLAYLIST.URL_VALIDATION_ERROR' | translate
        }}</mat-hint>
        <mat-error>{{ 'SETTINGS.EPG_URL_ERROR' | translate }}</mat-error>
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-label for="username">{{
            'HOME.XTREAM_PLAYLIST.USERNAME' | translate
        }}</mat-label>
        <input matInput type="text" id="username" formControlName="username" />
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-label for="password">{{
            'HOME.XTREAM_PLAYLIST.PASSWORD' | translate
        }}</mat-label>
        <input matInput type="text" id="password" formControlName="password" />
    </mat-form-field>
    <button
        mat-button
        type="submit"
        [disabled]="!form.valid"
        (click)="addPlaylist()"
    >
        {{ 'HOME.XTREAM_PLAYLIST.ADD' | translate }}
    </button>
</form>
